<template>
    <div>
        <div class="datainput">
            <el-row type="flex" class="row-1" justify="flex-start">
                <el-col :span="6">
                    <span class="label">基金编号</span>
                    <el-input v-model="fundId" clearable style="width:70%"></el-input>
                </el-col>
                <el-col :span="6">
                    <span class="label">基金名称</span>
                    <el-input v-model="fundName" clearable style="width:70%"></el-input>
                </el-col>
            </el-row>
            <el-row type="flex" class="row-2" justify="flex-start">
                <el-col :span="6">
                    <span class="label">基金状态</span>
                    <el-select v-model="fundStatus" clearable style="width:70%">
                        <el-option label="上架" value="FOR_SALE"></el-option>
                        <el-option label="已下架" value="NOT_FOR_SALE"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6">
                    <span class="label">风险等级</span>
                    <el-select v-model="riskLevel" clearable style="width:70%">
                        <el-option label="低" value="LOW"></el-option>
                        <el-option label="中等" value="MEDIUM"></el-option>
                        <el-option label="高" value="HIGH"></el-option>
                    </el-select>
                </el-col>
                <el-col :span="6" :offset="1">
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button style="marign-left:20px;" @click="clear">清空条件</el-button>
                </el-col>
            </el-row>
        </div>

        <div class="datatable">
            <el-table :data="currows" @row-click="rowClick">
                <el-table-column
                    v-for="item in tableConfig"
                    :key="item.prop"
                    :prop="item.prop"
                    :label="item.label"
                    :formatter="item.formatter"
                    :min-width="item.minWidth"
                    align="center"
                ></el-table-column>
                <el-table-column label="基金状态" align="center" width="400px">
                    <template slot-scope="scope">
                        <el-select v-model="scope.row.fundStatus" @change="changeStatus(scope.row)">
                            <el-option label="上架" value="FOR_SALE"></el-option>
                            <el-option label="已下架" value="NOT_FOR_SALE"></el-option>
                        </el-select>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                background
                layout="total, prev, pager, next, sizes, jumper"
                :page-size.sync="pageInfo.pageSize"
                :page-sizes="[10,20,30,40,50]"
                :total="total"
                :current-page.sync="pageInfo.pageNum"
                style="text-align: center; margin-top: 20px"
            ></el-pagination>
        </div>
    </div>
</template>

<script>
import { getFundList } from '@/api/fund'
export default {
    name: 'FundQuery',
    data() {
        return {
            fundId: null,
            fundName: null,
            fundStatus: null,
            riskLevel: null,
            rows: [
                {
                    fundId: 81,
                    fundName: '第81基金',
                    netWorth: 81,
                    riskLevel: 'LOW',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 82,
                    fundName: '第82基金',
                    netWorth: 82,
                    riskLevel: 'MEDIUM',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 83,
                    fundName: '第83基金',
                    netWorth: 83,
                    riskLevel: 'HIGH',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 84,
                    fundName: '第84基金',
                    netWorth: 84,
                    riskLevel: 'LOW',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 85,
                    fundName: '第85基金',
                    netWorth: 85,
                    riskLevel: 'MEDIUM',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 86,
                    fundName: '第86基金',
                    netWorth: 86,
                    riskLevel: 'HIGH',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 87,
                    fundName: '第87基金',
                    netWorth: 87,
                    riskLevel: 'LOW',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 88,
                    fundName: '第88基金',
                    netWorth: 88,
                    riskLevel: 'MEDIUM',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 89,
                    fundName: '第89基金',
                    netWorth: 89,
                    riskLevel: 'HIGH',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 90,
                    fundName: '第90基金',
                    netWorth: 90,
                    riskLevel: 'LOW',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 91,
                    fundName: '第91基金',
                    netWorth: 91,
                    riskLevel: 'MEDIUM',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 92,
                    fundName: '第92基金',
                    netWorth: 92,
                    riskLevel: 'HIGH',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 93,
                    fundName: '第93基金',
                    netWorth: 93,
                    riskLevel: 'LOW',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 94,
                    fundName: '第94基金',
                    netWorth: 94,
                    riskLevel: 'MEDIUM',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 95,
                    fundName: '第95基金',
                    netWorth: 95,
                    riskLevel: 'HIGH',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 96,
                    fundName: '第96基金',
                    netWorth: 96,
                    riskLevel: 'LOW',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 97,
                    fundName: '第97基金',
                    netWorth: 97,
                    riskLevel: 'MEDIUM',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 98,
                    fundName: '第98基金',
                    netWorth: 98,
                    riskLevel: 'HIGH',
                    fundStatus: 'FOR_SALE',
                },
                {
                    fundId: 99,
                    fundName: '第99基金',
                    netWorth: 99,
                    riskLevel: 'LOW',
                    fundStatus: 'FOR_SALE',
                },
            ],
            pageInfo: {
                pageNum: 1,
                pageSize: 10,
            },
            tableConfig: [
                { prop: 'fundId', label: '基金编号' },
                { prop: 'fundName', label: '基金名称' },
                { prop: 'netWorth', label: '基金净值' },
                {
                    prop: 'riskLevel',
                    label: '风险等级',
                    formatter(row, column, cellValue) {
                        switch (cellValue) {
                            case 'LOW':
                                return '低'
                            case 'MEDIUM':
                                return '中等'
                            case 'HIGH':
                                return '高'
                            default:
                                return '无'
                        }
                    },
                },
            ],
        }
    },
    methods: {
        search() {
            getFundList(
                this.fundId == '' ? null : this.fundId,
                this.fundName == '' ? null : this.fundName,
                this.fundStatus == '' ? null : this.fundStatus,
                this.riskLevel == '' ? null : this.riskLevel
            ).then((res) => {
                this.rows = res.data.data
            })
        },
        clear() {
            this.fundId = null
            this.fundName = null
            this.fundStatus = null
            this.riskLevel = null
            getFundList(null, null, null, null).then((res) => {
                this.rows = res.data.data
            })
        },
        changeStatus(row) {
            console.log(row)
        },
        rowClick(row) {
            this.$router.push({
                path: '/funddetail',
                query: { fundId: row.fundId },
            })
            console.log(row)
        },
    },
    computed: {
        total() {
            return this.rows.length
        },
        currows() {
            return this.rows.slice(
                (this.pageInfo.pageNum - 1) * this.pageInfo.pageSize,
                this.pageInfo.pageNum * this.pageInfo.pageSize
            )
        },
    },
    mounted() {
        getFundList(null, null, null, null).then((res) => {
            this.rows = res.data.data
        })
    },
}
</script>

<style scoped>
.datainput {
    width: 95%;
    height: 172px;
    margin-top: 15px;
    background-color: rgba(255, 255, 255, 100);
    color: rgba(16, 16, 16, 100);
    font-size: 16px;
    font-family: Roboto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.datainput div[class^='row'] {
    margin-left: 80px;
}
.datainput .row-2 {
    margin-top: 27px;
}
.datainput span.label {
    display: inline-block;
    width: 25%;
}

.datatable {
    margin-top: 15px;
    width: 80%;
}
.datatable ::v-deep .table-stripe {
    background-color: #f8f8f8;
}

.el-pagination.is-background ::v-deep .el-pager li {
    background-color: #ffffff;
}
.el-pagination.is-background ::v-deep button {
    border: 1px solid rgba(217, 217, 217, 100);
}
</style>